<template>
    <div class="header">
        <div :class="['weather',themeType?'black':'white']">
            <div class="place">大连</div>
            <p>晴 27℃</p>
        </div>
        <van-search class="search" v-model="value" placeholder="请输入搜索关键词" />
        <van-icon :class="['icon-button',themeType?'black':'white']" name="scan" />
        <van-icon :class="['icon-button',themeType?'black':'white']" name="envelop-o" />
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const props = defineProps(['theme'])
const value = ref('')
const themeType = ref(props.theme)
onMounted(() => {
    addEventListener('scroll', () => {
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop > 50||props.theme) {
            document.querySelector('.header').style.backgroundColor = '#fff'
            themeType.value = 1
        } else {
            document.querySelector('.header').style.backgroundColor = 'transparent'
            themeType.value = 0
        }
})
})


</script>

<style scoped>
:deep(.van-search){
    background-color: unset;
}
:deep(.van-search__content){
    background-color: rgba(0,0,0,.2);
}
.black {
    color: #000;
}
.white {
    color: #fff;
}
.header {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid transparent;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}
.header .weather {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.weather .place {
    font-size: 12px;
}
.weather p {
    font-size: 10px;
}
:deep(.van-search__field .van-field__left-icon){
    color: #fff;
}
:deep(.van-search__content){
    height: 30px;
}
:deep(.van-field__control){
    color: #fff;
}
:deep(.van-field__control::placeholder){
    color: #fff;
}
:deep(.van-field__control::-webkit-input-placeholder){
	color: #fff;
}
:deep(.van-field__control::-moz-placeholder){
	color: #fff;
}
:deep(.van-field__control::-moz-placeholder){
	color: #fff;
}
:deep(.van-field__control::-ms-input-placeholder){
	color: #fff;
}
.icon-button {
    padding: 5px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.2);
}
</style>